<script setup lang="ts" name="Swiper">
	import { carouselsListApi } from '@/api/modules/config'
	import { onMounted, reactive, ref, toRefs } from 'vue'
	import SwiperDialog from './components/SwiperDialog.vue'
	import Pagination from '@/components/Pagination/index.vue'

	// Dialog实例
	const swiperRef = ref()
	// Dialog操作类型
	const swiperType = ref<'add' | 'update'>('add')

	const selectTable = ref([])

	// 表格数据类型
	interface TableProps {
		tableData: any[]
		loading: boolean
		pageable: {
			total: number
			currentPage: number
			pageSize: number
		}
	}

	// 表格相关数据
	const state: TableProps = reactive({
		tableData: [],
		loading: false,
		pageable: {
			total: 0,
			currentPage: 1,
			pageSize: 10
		}
	})

	// 获取表格数据
	const getTableData = async () => {
		state.loading = true
		const { currentPage, pageSize } = pageable.value
		const { data } = await carouselsListApi({ pageNumber: currentPage, pageSize })
		state.tableData = data.list
		state.loading = false

		state.pageable.total = data.totalCount
		state.pageable.pageSize = data.pageSize
		state.pageable.currentPage = data.currPage
	}

	// 修改值
	const handleUpdate = row => {
		swiperType.value = 'update'
		swiperRef.value.ruleForm = { ...row }
		swiperRef.value.dialogOpen()
	}

	// 实例挂载后
	onMounted(() => {
		getTableData()
	})

	// 解析state中的值【方便模板使用】
	const { tableData, loading, pageable } = toRefs(state)
</script>

<template>
	<div class="content-box">
		<!-- 按钮组 -->
		<div class="mb-10">
			<el-button
				icon="plus"
				type="primary"
				@click="
					() => {
						swiperType = 'add'
						swiperRef.dialogOpen()
					}
				"
				>增加</el-button
			>
			<el-popconfirm title="你确定要删除吗?" @confirm="handleRemove()">
				<template #reference>
					<!-- <el-button icon="delete" type="danger" :disabled="selectTable.length === 0">批量删除</el-button> -->
					<el-button icon="delete" type="danger">批量删除{{ selectTable.length }}</el-button>
				</template>
			</el-popconfirm>
		</div>
		<!-- 表格区域 -->
		<el-table
			class="mb-10"
			row-key="carouselId"
			v-loading="loading"
			:data="tableData"
			@selection-change="selectTable = $event"
			border
		>
			<el-table-column type="selection" width="55" reserve-selection />
			<el-table-column label="轮播图">
				<template #default="{ row }">
					<el-image style="width: 64px; height: 64px" :src="row.carouselUrl" alt="轮播图" />
				</template>
			</el-table-column>
			<el-table-column label="跳转链接" show-overflow-tooltip>
				<template #default="{ row }">
					<el-link :href="row.redirectUrl">{{ row.redirectUrl }}</el-link>
				</template>
			</el-table-column>
			<el-table-column label="排序值" width="120" prop="carouselRank" />
			<el-table-column label="添加时间" width="200" prop="createTime" />
			<el-table-column label="操作" width="200">
				<template #default="{ row }">
					<el-button type="primary" link @click="handleUpdate(row)">修改</el-button>
					<el-popconfirm title="确定删除吗?" @confirm="handleRemove([row.carouselId])">
						<template #reference>
							<el-button type="danger" link>删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		<Pagination :pageable="pageable" @size-change="getTableData" @page-change="getTableData" />
		<swiper-dialog ref="swiperRef" :type="swiperType" :reload="getTableData" />
	</div>
</template>

<style scoped lang="scss">
	@import './index.scss';
</style>
